<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:p="http://primefaces.org/ui">
<f:view>
    <ui:composition template="headerTemplate.xhtml">
        <ui:define name="content">
            <h:form>
                <h1 class="sub-header">Unread Notifications</h1>
                    <div class="btn-group">
                        <button type="submit" jsf:action="#{notificationBean.selectAllUnread(false)}" jsf:update=":unreadNotificationsTable" class="btn btn-default">Check all
                        </button>
                        <button type="submit" jsf:action="#{notificationBean.selectAllUnread(true)}" jsf:update=":unreadNotificationsTable" class="btn btn-default">Uncheck all
                        </button>
                        <button type="submit" jsf:action="#{notificationBean.updateUnreadNotification(false)}" jsf:update=":unreadNotificationsTable, :readNotificationsTable" class="btn btn-default">Set selected as read
                        </button>
                       <div class="btn-group">
                           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                               Filter by <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu" role="menu">
                               <li><a href="" jsf:action="#{notificationBean.showInvitation(false)}" jsf:update=":unreadNotificationsTable">Invitation</a></li>
                               <li><a href="" jsf:action="#{notificationBean.showBadWeatherNotification(false)}" jsf:update=":unreadNotificationsTable">Bad Weather</a></li>
                               <li><a href="" jsf:action="#{notificationBean.showEventModificationNotification(false)}" jsf:update=":readNotificationsTable">Event modification</a></li>
                               <li><a href="" jsf:action="#{notificationBean.showAll(false)}" jsf:update=":unreadNotificationsTable">All</a></li>
                           </ul>
                       </div>
                    </div>
                    <h:dataTable id="unreadNotificationsTable" var="notification" styleClass="table table-striped" value="#{notificationBean.unreadNotificationByUser}">
                        <p:column>
                            <f:facet name="header">Receiving Date</f:facet>
                            <h:outputText value="#{notification.generationDate}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">Receiving Time</f:facet>
                            <h:outputText value="#{notification.generationTime}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">Event title</f:facet>
                            <h:outputText value="#{notification.relatedEvent.title}" rendered="#{not empty notification.relatedEvent}" />
                            <h:outputText value="#{notification.title}" rendered="#{empty notification.relatedEvent}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">Message</f:facet>
                            <h:outputText value="#{notification.message}" />
                                <button  jsf:update="unreadNotificationsTable" jsf:action="#{notificationBean.accept(notification)}" jsf:rendered="#{(notification['class'].simpleName == 'BadWeatherNotificationWithSuggestion') and (not empty notification.newStartingDate) }">                       
                                    Accept
                                </button>
                        </p:column>
                        <p:column>
                            <f:facet name="header">Event Details</f:facet>
                            <button type="button" jsf:outcome="eventDetails.xhtml?faces-redirect=true" class="btn btn-default btn-xs" jsf:rendered="#{not empty notification.relatedEvent}">
                                Show event details<f:param name="event" value="#{notification.relatedEvent.id}"/>
                            </button>
                        </p:column>
                        <p:column>
                            <f:facet name="header">Read</f:facet>
                            <p:selectBooleanCheckbox value="#{notification.read}"/>
                        </p:column>
                    </h:dataTable>



            <h1 class="sub-header">Read Notifications</h1>
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        Filter by <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="" jsf:action="#{notificationBean.showInvitation(true)}" jsf:update=":readNotificationsTable">Invitation</a></li>
                        <li><a href="" jsf:action="#{notificationBean.showBadWeatherNotification(true)}" jsf:update=":readNotificationsTable">Bad Weather</a></li>
                        <li><a href="" jsf:action="#{notificationBean.showEventModificationNotification(true)}" jsf:update=":readNotificationsTable">Event modification</a></li>
                        <li><a href="" jsf:action="#{notificationBean.showAll(true)}" jsf:update=":readNotificationsTable">All</a></li>
                    </ul>
                </div>
            <h:dataTable id="readNotificationsTable" var="notification" styleClass="table table-striped" value="#{notificationBean.readNotificationByUser}">
                <p:column>
                    <f:facet name="header">Receiving Date</f:facet>
                    <h:outputText value="#{notification.generationDate}" />
                </p:column>
                <p:column>
                    <f:facet name="header">Receiving Time</f:facet>
                    <h:outputText value="#{notification.generationTime}" />
                </p:column>
                <p:column>
                    <f:facet name="header">Event title</f:facet>
                    <h:outputText value="#{notification.relatedEvent.title}" rendered="#{not empty notification.relatedEvent}" />
                    <h:outputText value="#{notification.title}" rendered="#{empty notification.relatedEvent}" />
                </p:column>
                <p:column>
                    <f:facet name="header">Message</f:facet>
                    <h:outputText value="#{notification.message}" />
                </p:column>
                <p:column>
                    <f:facet name="header">Event Details</f:facet>
                    <button type="button" jsf:outcome="eventDetails.xhtml?faces-redirect=true" class="btn btn-default btn-xs" jsf:rendered="#{not empty notification.relatedEvent}">
                        Show event details<f:param name="event" value="#{notification.relatedEvent.id}"/>
                    </button>
                </p:column>
            </h:dataTable>
            </h:form>
        </ui:define>
    </ui:composition>
</f:view>
</html>
